import { PageContainer, View } from "@tarojs/components";
import Taro, { useDidShow, useRouter } from "@tarojs/taro";

import ByCol from "@/components/ui/ByCol";
import ByRow from "@/components/ui/ByRow";
import ApiAcceptance from "@/api/acceptance";
import ByButton from "@/components/ui/ByButton";
import ByCellGroup from "@/components/ui/ByCellGroup";
import ProgressItem from "@/components/app/ProgressItem";
import PopupCustomerConfirm from "./components/PopupCustomerConfirm";
import useFetch from "@/hooks/useFetch";

import { useResetState } from "ahooks";
import { objectToQueryString } from "@/utils";

// const EnumState = {
//   0: { label: "未通过", type: "error" },
//   1: { label: "已通过", type: "success" },
//   99: { label: "待验收", type: "info" },
// };

const ProgressGroup = ({ source }: { source }) => {
  /**
   * state 0-已保存|1-已完成 (1已通过 0 未通过) 99 待验收
   * confirmStatius: 0-未确认|1-已确认
   */
  const { state, confirmStatius } = source;

  return (
    <>
      <ProgressItem
        text="验收"
        status={state === 1 ? "success" : state === 0 ? "error" : undefined}
      />
      <ProgressItem
        tail={confirmStatius !== 1}
        text="客户确认"
        status={
          state === 1
            ? confirmStatius === 1
              ? "success"
              : "active"
            : undefined
        }
      />
      {confirmStatius === 1 && (
        <ProgressItem tail text="完成" status="success" />
      )}
    </>
  );
};

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const { data, run } = useFetch<{
    quesNaireTemplates: any[];
  }>(ApiAcceptance.acceptanceTemplateList, {
    manual: true,
    showLoading: true,
    cacheKey: ApiAcceptance.acceptanceTemplateList + intentCustomerId,
  });

  useDidShow(() => run({ intentCustomerId }));

  const handleButton = (item) => {
    const { recordMainId, quesNaireId, state, confirmStatius, quesNaireType } =
      item;

    Taro.navigateTo({
      url: `${recordMainId ? "detail" : "form"}?${objectToQueryString({
        state,
        confirmStatius,

        quesNaireId,
        recordMainId,
        intentCustomerId,

         quesNaireType,
      })}`,
    });
  };

  const [recordMainId, setRecordMainId, resetRecordMind] = useResetState<
    number | undefined
  >(undefined);

  return (
    <>
      {data && (
        <View className="p-3">
          <ByCellGroup>
            {data?.quesNaireTemplates.map((item, index) => (
              <ByRow
                key={item.quesNaireId}
                align="center"
                className={`border-line-light ${index != 0 && "border-t-1"}`}
              >
                <ByCol span={"auto"} className="p-3">
                  <View className="font-bold mb-2">{item.quesNaireName}</View>
                  <ProgressGroup source={item} />
                </ByCol>

                <ByCol span={"none"}>
                  <ByButton
                    round
                    variant={item.recordMainId ? "outline" : "solid"}
                    onClick={() => handleButton(item)}
                  >
                    {item.recordMainId ? "详情" : "验收"}
                  </ByButton>

                  {/* {item.confirmStatius === 1 ? (
                    <ByText>详情</ByText>
                  ) : item.state === 1 && item.confirmStatius === 0 ? (
                    <ByButton
                      onClick={() => setRecordMainId(item.recordMainId)}
                    >
                      客户确认
                    </ByButton>
                  ) : (
                    <ByButton onClick={() => handleButton(item)}>验收</ByButton>
                  )} */}
                </ByCol>
              </ByRow>
            ))}
          </ByCellGroup>
        </View>
      )}

      <PageContainer round show={!!recordMainId} onAfterLeave={resetRecordMind}>
        {recordMainId && (
          <PopupCustomerConfirm
            recordMainId={recordMainId}
            onCancel={resetRecordMind}
          />
        )}
      </PageContainer>
    </>
  );
};
